<template>
	<div class="video-background">
		<video autoplay loop muted :src="videoSrc" />
	</div>
	<div class="bj">
		<img class="bjfont" src="https://www.mihoyo.com/_nuxt/img/slogan@2x.301d3f9.png" alt="">
		<div class="bjbut" @click="showvideo">
			<el-icon class="bjbutmain" size="30" color="#fff">
				<CaretRight />
			</el-icon>
		</div>
		<div class="diasp" v-if="showsp">
			<video width="800" height="600" controls autoplay muted :src="videoSrc2" />
			<el-icon class="iconclo" color="#fff" size="40" @click="showsp = false">
				<Close />
			</el-icon>
		</div>
	</div>
</template>

<script setup>
	import {
		CaretRight,
		Close
	} from '@element-plus/icons-vue';
	import {
		ref
	} from 'vue';
	let videoSrc = ref(
		"https://webstatic.mihoyo.com/upload/op-public/2021/08/12/c7f405d6cbb03e5c668a12d3e0de290a_2683598109381103734.mp4"
	)
	let videoSrc2 = ref(
		"https://webstatic.mihoyo.com/upload/op-public/2023/01/13/ff5f7fe208a947bf0c7c0239c54411f4_592291034584067074.mp4"
	)
	const showsp = ref(false)
	let showvideo = () => {
		showsp.value = true
	}
</script>

<style scoped>
	.video-background {
		position: absolute;
		top: 60px;
		right: 0;
		bottom: 0;
		left: 200px;
		overflow: hidden;
		z-index: -100;
	}

	.video-background video {
		position: absolute;
		top: 50%;
		left: 50%;
		min-width: 100%;
		min-height: 100%;
		width: auto;
		height: auto;
		z-index: -100;
		transform: translateX(-50%) translateY(-50%);
	}

	.bj {
		background-color: rgba(0, 0, 0, 0.5);
		width: 100%;
		height: 100%;
		overflow: hidden;
	}

	.bj .bjfont {
		position: absolute;
		width: 600px;
		height: 300px;
		top: calc(50% - 200px);
		left: calc(50% - 200px);
	}

	.bjbut {
		position: absolute;
		top: calc(50% + 150px);
		left: calc(50% - 20px);
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		width: 6.25rem;
		height: 3.125rem;
		background: url() no-repeat 0 0/100% 100%;
		cursor: pointer;
		-webkit-transition: all 500ms;
		-o-transition: all 500ms;
		transition: all 500ms;
	}

	.diasp {
		background-color: #000;
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		top: 0;
		left: 0;
	}

	.diasp .iconclo {
		margin-bottom: 435px;
		margin-left: 15px;
		transition: transform 0.5s;
		-moz-transition: -moz-transform 0.5s;
		/* Firefox 4 */
		-webkit-transition: -webkit-transform 0.5s;
		/* Safari 和 Chrome */
		-o-transition: -o-transform 0.5s;
	}

	.bjbutmain:hover {
		color: #35b8ff;
	}

	.iconclo:hover {
		transform: rotate(180deg);
		-webkit-transform: rotate(180deg);
		-moz-transform: rotate(180deg);
		-o-transform: rotate(180deg);
	}
</style>